{% extends "base.html.twig" %}



		{% block loginform %}		
			
		  <form class="navbar-form navbar-right" action="{{ path('_secure_logout') }}" method="post">
		    <button type="submit" class="btn btn-success">Logout</button>
		  </form>
		 
		 {% endblock %}

		 {% block logo %}	
	          <a class="navbar-brand" href="{{ path('overview_events') }}">SELV - book</a>
          	  <div class="navbar-brand">Willkommen {{ persons.firstname }} in Deinem Bereich</div>
		  {% endblock %}
		  
		  {% block topnavigation %} 
			<ul class="nav navbar-nav navbar-right" style="margin-right:30px;">
		<!--            <li class="active"><a href="#">Home</a></li>
		            <li><a href="#about">About</a></li>
		            <li><a href="#contact">Contact</a></li>
		-->            
		            <li class="dropdown">
		              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Einstellungen<b class="caret"></b></a>
		              <ul class="dropdown-menu">
		                <li><a href="#" id="pers-bild-upload">Profilbild</a></li>
		                <li><a href="{{ path('psw_change') }}">Passwort</a></li>
		                <li class="divider"></li>
			            <li class="dropdown-header">Persönliche Angaben</li>
		                <li><a href="{{ path('address_change') }}">Adresse</a></li>
		                <li><a href="{{ path('phone_change') }}">Handy</a></li>
		                <li><a href="{{ path('email_change') }}">Email</a></li>
		                <li><a href="{{ path('motto_change') }}">Motto</a></li>
		              </ul>
		            </li>            
			</ul>
			{% endblock %}
			
		  {% block navigationadmin %} 
		  {% if is_granted('ROLE_ADMIN') %}
			<ul class="nav navbar-nav navbar-right" style="margin-right:30px;">
		            <li class="dropdown">
		              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin Bereich<b class="caret"></b></a>
		              <ul class="dropdown-menu">
		                <li><a href="{{ path('new_events') }}">Events erfassen</a></li>
		                <li><a href="{{ path('statistic_overview') }}">Statistik erfassen</a></li>
		              </ul>
		            </li>            
			</ul>
			{% endif %}
			{% endblock %}


{% block maincontent %}


      <!-- Example row of columns -->
	<div class="row">
		<div class="col-md-2 left-col">
			<div class="col-fixed">
			<h2>{{ persons.firstname }}</h2>
			{% for item in personimagest %}
			<p><img id="personal-image-profil" style="max-width:80%;" class="img-responsive" src="/{{ item.path }}profilbild/{{ item.image }}" /></p>
			{% endfor %}
			
			<p style="margin:10px 0 0 0; font-style:italic;" class="ref-motto">
			{% if persons.motto != "" %}
				"{{ persons.motto }}"
			{% endif %}
			</p>
			
			<p style="margin:30px 0 0 0;" id="user-status">
				<h5><b>SELV - Online</b></h5>
				{% for key,item in usersinformation %}
					<div>
					{% if item.status == true %} 
						<span id="user-status-{{ key }}" class="user-status-online">{{ item.firstname }} - Online</span>
					{% else %}
						<span id="user-status-{{ key }}" class="user-status-offline">{{ item.firstname }} - Offline</span>
					{% endif %}	
						</br />
						<a href="{{ path('user_info') }}/{{ key }}"><img style="padding:0 0 10px 0;" src="{{ item.file }}"/></a>
					</div>
				{% endfor %}
			</p>
			</div>
		</div>
		<div class="col-md-8">
			
			{% block content %}{% endblock %}
			
			<input type="hidden" name="url-pinnwand" value="{{ path('insert_pinnwand') }}"/>
			<input type="hidden" name="url-pinnwand-images" value="{{ path('image_directory') }}"/>
			<input type="hidden" name="url-upload-images" value="{{ path('upload_images') }}"/>
			<input type="hidden" name="url-prepare-images" value="{{ path('prepare_image') }}"/>
			<input type="hidden" name="url-check-directory" value="{{ path('check_directory') }}"/>
			<input type="hidden" name="url-index" value="{{ path('login_index') }}"/>
			<input type="hidden" name="url-setpsw-change" value="{{ path('setpsw_change') }}"/>
			<input type="hidden" name="url-setpers-change" value="{{ path('setpers_change') }}"/>
			<input type="hidden" name="url-users-live" value="{{ path('areusers_live') }}"/>
			<input type="hidden" name="url-logout_user" value="{{ path('logout_user') }}"/>
			<input type="hidden" name="url-send-pinnwand" value="{{ path('send_pinnwand') }}"/>
			
			
			
		</div>
		<div class="col-md-2 right-col">
			<div class="col-fixed">
			<h2>Anmeldungen</h2>
			{% if inscriptions|length > 0 %}
			<p><strong>für den {{ information_datum|intl_month }}</strong></p>
			<p>
				<table class="table">
					<thead>
						<tr>
							<th>Name</th>
							<th>Status</th>
						</tr>
					</thead>
					<tbody>
					{% for inscription in inscriptions %}
						<tr>
							<td>{{ inscription.firstname }}</td>
							<td>{% if inscription.participate == -1 %} offen {% elseif inscription.participate == 0 %} <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> {% else %} <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> {% endif %}</td>
		        		</tr>
		    		{% endfor %}
	    			</tbody>
    			</table>
			</p>
			{% else %}
				Zur Zeit keine Events
			{% endif %}
			</div>
		</div>
	</div>
	
	
<div id="pers-bild-lightbox-panel">
<p align="center"><a id="close-panel" class="close-panel" href="#">Fenster schliessen</a></p>
	<div id="profilbild-area">
		<h2>Bild auswählen <span id="aj-set-image-bildupload-pers"><img src="/bundles/acmeperson/images/ajax-loader.gif" /></span></h2>
		
		
		<p>Bitte wähle Dein Profilbild aus <span id="aj-set-image-thumb"><img src="/bundles/acmeperson/images/ajax-loader.gif" /></span></p>
		<p id="personal-thumb">
	
	
		{% for item in personimages %}
			{% if item.standart == 0 %}
			<img src="/{{ item.path }}thumbnail/{{ item.image }}" />
			{% else %}
			<img style="border:2px solid red;" src="/{{ item.path }}thumbnail/{{ item.image }}" />
			{% endif %}
		{% endfor %}
			
	
		</p>  
		<h2>Lade ein neues Bild drauf</h2>
		<p>Hier hast du die Möglichkeit eine anderes persönliches Bild von Dir draufzuladen.</p>  
	</div>
	<div id="pinnwand-area">
		<h2>Lade deine Bilder auf und kommentiere etwas dazu <span id="aj-set-image-bildupload"><img src="/bundles/acmeperson/images/ajax-loader.gif" /></span></h2> 
		<p><textarea name="pinnwand-upload" class="form-control" rows="2" placeholder="Was machst Du als SELV ?"></textarea></p>
	</div>
	
<div class="container">
    <!-- The file upload form used as target for the file upload widget -->
    <!-- <form id="fileupload" action="/auth/security/uploadimages" method="POST" enctype="multipart/form-data"> --> 
    <form id="fileupload" action="http://jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
        <!-- Redirect browsers with JavaScript disabled to the origin page -->
        <noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="col-lg-7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel upload</span>
                </button>
                <!--
                <button type="button" class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle">
                -->
                <!-- The global file processing state -->
                <span class="fileupload-process"></span>
            </div>
            <!-- The global progress state -->
            <div class="col-lg-5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
    </form>
</div>

<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">�</a>
    <a class="next">�</a>
    <a class="close">�</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
<!-- The template to display files available for upload -->
{% verbatim %}
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <img src="{%=file.thumbnailUrl%}">
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
{% endverbatim %}	
	
	
	
	
	
<p align="center"><a id="close-panel" class="close-panel" href="#">Fenster schliessen</a></p>  

</div>  


<div id="pers-bild-lightbox"></div>        
      
{% endblock %}      
      

	

	{% block jsscript %}    
    <script>
		var url_fileupload = "";
		var delete_filename = "";
	</script>
    <script src="{{ asset('bundles/acmeperson/js/main.js') }}" /></script>

	<script src="{{ asset('bundles/acmeperson/js/pers-lightbox.js') }}"></script>
	<script>
		var username = "{{ user.username }}";
		{% for item in personimagest %}
		var imagest = "{{ item.image }}";
		var path = "{{ item.path }}";
		{% endfor %}
		
		
		
	</script>
	<script src="{{ asset('bundles/acmeperson/js/pers-upload-delete-file.js') }}"></script>
	<script src="{{ asset('bundles/acmepinnwand/js/pinnwand-insert.js') }}"></script>


	{% endblock %}
    
